<template>
  <view class="content">
    <view class="title mt64">HELLO！</view>
    <view class="sub_title">欢迎使用—搬搬货小程序</view>
    <view class="copyright">© 2024-2040 上海新太语商务咨询中心版权所有</view>
    <view class="role mt96" :class="{ active: role == 'customer' }" @click="role = 'customer'">
      <view class="role_content flex_r kh">
        <view class="_role">我是客户</view>
        <view class="_select">
          <image v-if="(role == 'customer')" src="@/static/images/index/icon_select.png"
            style="width: 32rpx;height: 32rpx;" />
          <image v-else src="@/static/images/index/icon_unselect.png" style="width: 32rpx;height: 32rpx;" />
        </view>
      </view>
    </view>
    <view class="role mt64" :class="{ active: role == 'worker' }" @click="role = 'worker'">
      <view class="role_content flex_r sf">
        <view class="_role">我是师傅</view>
        <view class="_select">
          <image v-if="(role == 'worker')" src="@/static/images/index/icon_select.png"
            style="width: 32rpx;height: 32rpx;" />
          <image v-else src="@/static/images/index/icon_unselect.png" style="width: 32rpx;height: 32rpx;" />
        </view>
      </view>
    </view>
    <!-- 同意协议 -->
    <view class="xieyi flex_c">
      <view class="flex_r" @click.stop="handlerAuth">
        <image v-if="isAuth" src="@/static/images/index/icon_select.png"
          style="width: 32rpx;height: 32rpx;margin-right: 6rpx;" />
        <image v-else src="@/static/images/index/icon_unselect.png"
          style="width: 32rpx;height: 32rpx;margin-right: 6rpx;" />
        <view>同意</view>
      </view>
      <view class="_text" @click="toAgreement">《用户协议》、《用户行为规范》</view>
    </view>
    <button v-if="isAuth" class="btn flex_c" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录授权</button>
    <button v-else class="btn flex_c" style="opacity: 0.6;">登录授权</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { LoginWxMinParams } from '@/types'
import { weixinMiniAppLogin } from '@/api/index/index'
import { getMemberInfo as getMemberInfoApi, getUserRoleList } from '@/api/mine/userInfo'
import { onLoad } from '@dcloudio/uni-app';
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

const role = ref("customer")

onLoad(() => {
  getCode()
})
const loginForm: LoginWxMinParams = {
  phoneCode: '',
  loginCode: '',
  state: 'default',
  roleType: 1
}
// 获取code
const getCode = (() => {
  uni.login({
    success: function (res: UniApp.LoginRes) {
      loginForm.loginCode = res.code
    }
  })
})
const isAuth = ref(false)
const handlerAuth = () => {
  isAuth.value = !isAuth.value
}
// 登录授权
const getPhoneNumber = async (e: any) => {
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    return;
  }
  uni.showLoading({ title: '登录中' })
  loginForm.phoneCode = e.detail.code
  loginForm.roleType = role.value == 'customer' ? 1 : 2
  try {
    const res: any = await weixinMiniAppLogin(loginForm)
    memberStore.setUserInfo(res.data)
    uni.setStorageSync("role", role.value)
    // 获取用户个人信息
    getMemberInfoApi().then((res: any) => {
      if (res.code == 0 && res.data) {
        memberStore.setMemberInfo(res.data)
        uni.switchTab({ url: '/pages/tabbar/home/home' })
        uni.setStorageSync("loadData", true)
      }
    })
    uni.hideLoading()
  } catch (e) {
    uni.showToast({
      icon: 'none',
      title: '登录失败'
    })
    getCode()
    uni.hideLoading()
  }
}
// 跳转到用户协议
const toAgreement = () => {
  uni.navigateTo({
    url: '/pages/public/agreement/agreement'
  })
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100vh;
  padding: 0 24rpx;
  box-sizing: border-box;
  background: linear-gradient(151deg, #FFE9BE 0%, #FFFFFF 100%);
  overflow: hidden;
}

.title {
  font-weight: 600;
  font-size: 64rpx;
  color: #F2920B;
  line-height: 75rpx;
  margin-left: 24rpx;
}

.sub_title {
  width: fit-content;
  padding: 8rpx 16rpx;
  margin-left: 24rpx;
  background: #F2920B;
  border-radius: 80rpx 80rpx 80rpx 80rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  margin-top: 16rpx;
}

.copyright {
  margin-left: 24rpx;
  font-size: 20rpx;
  color: #F2920B;
  margin-top: 16rpx;
}

.role {
  width: 654rpx;
  height: 192rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;

  .role_content {
    width: 654rpx;
    height: 192rpx;

    ._role {
      margin-right: 24rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      line-height: 38rpx
    }

    ._select {
      margin-right: 40rpx;
    }
  }
}

.kh {
  background-image: url("https://www.banbanhuo.com/minio//banbanhuo/c1c8535024f7ba8e297616e14c622aaa4c60e90adec73416c5df5c3a3f9e0612.png");
  background-repeat: no-repeat;
  background-size: 654rpx 192rpx;
}

.sf {
  background-image: url("https://www.banbanhuo.com/minio//banbanhuo/cb8d1b56a76bfc84b2b0f82d42fe8f9712b76c9fa1e373fa9374a44869621350.png");
  background-repeat: no-repeat;
  background-size: 654rpx 192rpx;
}

.active {
  border: 1rpx solid #FF5F00;
}

.btn {
  width: 702rpx;
  height: 80rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #FFFFFF;
  background: #FE6E04;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  position: fixed;
  bottom: 82px;
}

.xieyi {
  width: 702rpx;
  height: 80rpx;
  position: fixed;
  bottom: 250rpx;
}

._text {
  text-decoration: underline;
  margin-left: 16rpx;
}

.mt64 {
  margin-top: 64rpx;
}

.mt96 {
  margin-top: 96rpx;
}
</style>
